<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/static/echarts/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:400px;margin-bottom: 50px"></div>
<div id="main2" style="width: 800px;height:800px;"></div>

<script th:src="@{/static/layui/layui.js}"></script>
<script src="/static/admin/jquery-3.5.0.min.js"></script>
<script type="text/javascript">
    fetchDataAndUpdateChart();
    fetchDataAndUpdateChart2();
    function fetchDataAndUpdateChart() {
        // var $ = layui;
        console.log('fetchDataAndUpdateChart');
        $.ajax({
            url: '/echarts/warehousingData', // 替换为您的后端接口地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log("入库",data)
                var xAxisData = data.xaxisData;
                console.log("xAxisData",xAxisData)
                var seriesData = data.seriesData;
                console.log("seriesData",seriesData)
                var option = {
                    title: {
                        text: '近一个月家具入库数量统计',
                        left: 'center'
                    },
                    tooltip: {},
                    legend: {
                        data: ['入库数量'],
                        top: 'bottom'
                    },
                    xAxis: {
                        data: xAxisData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '入库数量',
                            type: 'bar',
                            data: seriesData
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
            },
            error: function () {
                console.log('Error fetching data from backend');
            }
        });
    }

    function fetchDataAndUpdateChart2() {
        $.ajax({
            url: '/echarts/saleData', // 替换为您的后端接口地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log("销售",data)
                option2 = {
                    legend: {
                        top: 'bottom'
                    },
                    title: {
                        text: '年销售统计饼图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: '销量',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: data
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                var myChart = echarts.init(document.getElementById('main2'));
                myChart.setOption(option2);
            },
            error: function () {
                console.log('Error fetching data from backend');
            }
        });
    }

</script>
</body>
<style>
</style>
</html>